<template>
  <h1>Todo list</h1>
  <QuerySelect name="days" label="days" :options="daysOptions" />
  <QuerySelect name="priority" label="priority" :options="priorityOptions" />
  <QuerySelect name="isFinished" label="is finished" :options="isFinishedOptions" />
  <NTimeline size="large">
    <NTimelineItem v-for="todo in todosStore.todos" :color="color(todo)" :title="todo.title" :time="todo.created_at">
      {{ todo.description }}
      <div style="display: flex;flex-wrap: wrap; justify-content: center;">
        <NPopconfirm :show-icon="false" @positive-click="finTodo(todo.id)">
          <template #trigger>
            <NButton type="info" style="margin-left: 20px;" 
            :disabled="!!todo.finished_at">完成</NButton>
             <!-- disabled 用于禁用一个元素，当todo对象的finished_at属性存在时，该元素将被禁用。 -->
          </template>
          你确定完成该代办？
        </NPopconfirm>
        <NButton type="primary" style="margin-left: 20px;"   @click="$router.push({name:'todo.editTodo',params:{id:todo.id}})"
         :disabled="!!todo.finished_at">修改代办</NButton>
         <!-- 使用!!将其转换为布尔值，如果该属性存在，则转换后的布尔值为true，否则为false。当该元素的disabled属性被设置为true时，该元素将被禁用 -->
        <NPopconfirm :show-icon="false" @positive-click="deleTodo(todo.id)" >
          <template #trigger>
        <NButton type="error" style="margin-left: 20px;" >删除</NButton>
        </template>
          你确定删除该代办？
        </NPopconfirm>
      </div>

    </NTimelineItem>
  </NTimeline>
  <NDivider v-if="todosStore.isEnd">我是有底线的</NDivider>
</template>
<script setup lang="ts">
import { NDivider, NTimeline, NTimelineItem } from "naive-ui";
import { useTodosStore } from "../store";
import { Todo } from "@/types";
import useScrollToBottom from "../hooks/useScrollToBottom";
// import { request } from "../apis";
// 自动导入


import {
  daysOptions,
  priorityOptions,
  isFinishedOptions,
} from "../components/constant";

const todosStore = useTodosStore();

//
todosStore.search();
const color = (todo: Todo) =>
  todo.priority == "normal"
    ? "#9F9"
    : todo.priority == "important"
      ? "blue"
      : "red";
//
useScrollToBottom(() => {
  todosStore.page += 1;
  todosStore.search();
}, "onActivated");
//删除
const deleTodo =  (id:number)=>{
    todosStore.deleteTodo(id);  
}
//完成
const finTodo=(id:number)=>{
  todosStore.finishTodo(id)
}



</script>
